<template>
  <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="ID" prop="id">
        <el-input
          v-model="ruleForm.id"
          type="text"
          autocomplete="off"
          disabled
        />
      </el-form-item>
      <el-form-item label="账号" prop="name">
        <el-input
          v-model="ruleForm.name"
          type="text"
          autocomplete="off"
          disabled
        />
      </el-form-item>
      <el-form-item label="电话" prop="tel">
        <el-input v-model="ruleForm.tel" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色" prop="role">
        <el-input v-model.number="ruleForm.role" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleForm)">提交</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="序号" />
    <el-table-column prop="id" label="ID" />
    <el-table-column prop="name" label="账号" />
    <el-table-column prop="role" label="角色" />
    <el-table-column prop="tel" label="电话" />
    <el-table-column prop="" label="操作">
      <template #default="scope">
        <el-button
          type="primary"
          @click="(drawer = true), drawerOpen(scope.row)"
          >编辑</el-button
        >
        <el-button type="danger" @click="delUsers(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { getUserList, delateUsersAPI, editAPI } from "@/API/User";
import { reactive, ref } from "vue";
import { ElNotification } from "element-plus";

let drawer = ref(false);

const ruleForm = reactive({
  id: 0,
  name: "",
  tel: "",
  role: "",
});
const submitForm = (ruleForm) => {
  editAPI(ruleForm).then((res) => {
    console.log(res);
  });
};

let tableData: any = reactive([]);

const loadDataList = () => {
  getUserList({
    pageSize: 100,
  }).then((res) => {
    console.log(res.data.data);
    tableData.splice(0, res.data.data.length, ...res.data.data);
  });
};
loadDataList();

const delUsers = (val) => {
  console.log(val.id);
  delateUsersAPI(val.id).then((res) => {
    ElNotification({
      message: res.data.msg,
      type: "success",
    });
  });
};

const drawerOpen = (val) => {
  console.log(val);
  ruleForm.id = val.id;
  ruleForm.name = val.name;
};
</script>

<style scoped></style>
